<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jsx语法</title>
    <!-- 引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 引入react-dom 支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <!-- 用于将jsx转换成浏览器可识别的代码 -->
    <script src="./node_modules/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <!-- 使用jsx语法 -->
  <script type="text/babel">
    // 创建虚拟dom
    let ul = (
      <ul className="ul">
        <h2 className="h2">名单</h2>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li style={{color:'red'}}>赵六</li>
      </ul>
    );
    // 创建根节点
    let root = ReactDOM.createRoot(document.getElementById('root'))
    // 渲染页面
    root.render(ul)
  </script>
</html>
